* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #010101;
    overflow: hidden;
    font-family: Arial, Helvetica, sans-serif;
}

h1 {
    background-image: linear-gradient(to bottom, #b4b4b4, #3b3b3b);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 3em;
}

// .layer1 {
//     $size: 20px;

//     position: fixed;
//     top: 0;
//     left: 0;
//     width: $size;
//     height: $size;
//     border-radius: 50%;
//     z-index: -1;
//     // background-color: #f0f0f0;
//     // 以盒子阴影来作为其他的星星。 
//     // 阴影可以设置多个，因此就实现了一个 dom 元素但却有这么多星星的效果。
//     box-shadow: 10vw 10vw #fff, 20vw 23vw #fff;
// }

@function generate-box-shadow($count) {
    $shadows: "#{random(100)}vw #{random(100)}vh #fff";
    @for $i from 1 through $count {
        $shadows: unquote("#{$shadows}"), unquote("#{random(100)}vw #{random(100)}vh #fff");
    }
    @return $shadows;
}
// 一层的星星数量
// .layer1 {
//     // $size: 20px;
//     $size: unquote("#{random(100)}px");

//     position: fixed;
//     top: 0;
//     left: 0;
//     width: $size;
//     height: $size;
//     border-radius: 50%;
//     z-index: -1;
//     // background-color: #f0f0f0;
//     // 以盒子阴影来作为其他的星星。 
//     // 阴影可以设置多个，因此就实现了一个 dom 元素但却有这么多星星的效果。
//     box-shadow: generate-box-shadow(10);
//     animation: move-up 5s linear infinite;

//     // 在元素下面拼接一个一模一样的元素，实现星星向上移动后，画面中还能看到星星（此时看到的就是第二个元素的星星）。
//     // 并且注意，第二个元素的星星要和第一个元素一模一样，不能随机生成。因为动画结束后，会闪现回到原来的位置。
//     // 此时如果第二个元素星星不一样，就会有画面闪动一下的效果，体验不好。
//     // 所以，第二个元素的星星要和第一个元素一模一样，这样就不会闪动。
//     &::after {
//         content: "";
//         position: absolute;
//         top: 100vh;
//         left: inherit;
//         width: inherit;
//         height: inherit;
//         border-radius: inherit;
//         z-index: inherit;
//         box-shadow: inherit;
//     }
// }

// @keyframes move-up {
//     to {
//         transform: translateY(-100vh);
//     }
// }

// 5 层的星星效果

// 近大远小，近快远慢，近少远多，模拟星星的层次分明。
$count: 1000;
$duration: 400s;
@for $i from 1 through 5 {
    // 这里设计为层数越大，离得越近
    $duration: $duration / 2; // 近处时间变短，速度更快
    $count: floor($count / 2); // 星星数量变少
    .layer#{$i} {
        // 层数越大，星星越大
        $size: #{$i}px;
        position: fixed;
        top: 0;
        left: 0;
        width: $size;
        height: $size;
        border-radius: 50%;
        z-index: -1;
        box-shadow: generate-box-shadow($count);
        animation: move-up  $duration linear infinite;
        
        &::after {
            content: "";
            position: absolute;
            top: 100vh;
            left: inherit;
            width: inherit;
            height: inherit;
            border-radius: inherit;
            z-index: inherit;
            box-shadow: inherit;
        }
    }
}

@keyframes move-up {
    to {
        transform: translateY(-100vh);
    }
}